<script setup>
import { ref } from 'vue'
import {
  ArrowLeftBold,
  ArrowRightBold,
  ArrowDown
} from '@element-plus/icons-vue'
import UserSelect from './user-select/UserSelect.vue'
import LogoBox from './logo/LogoBox.vue'
import GitHupSvg from './svg/GitHupSvg.vue'
import WeiXinSvg from './svg/WeiXinSvg.vue'
import QqSvg from './svg/QqSvg.vue'
import CsdnSvg from './svg/CsdnSvg.vue'
import LogoImg from '@/assets/logo.png'
import ZlcodeChangeTheme from '@/components/zlcode/button/ZlChangeTheme.vue'

const dialogTableVisible = ref(false)

defineProps({
  isShowUserSelect: {
    type: Boolean,
    default() {
      return true
    }
  },
  // 导航项
  navItem: {
    type: Array,
    default() {
      return []
    }
  },
  title: {
    type: String,
    default() {
      return 'Code platform'
    }
  },
  logoUrl: {
    type: String,
    default() {
      return LogoImg
    }
  }
})
</script>

<template>
  <el-dialog
    v-model="dialogTableVisible"
    title="ZL编程技术圈"
    width="400"
    align-center="true"
    draggable="true"
    custom-class="dialog-class"
  >
    <el-row style="justify-content: center; align-items: center">
      <el-col :span="8" style="text-align: center">
        <el-icon size="30"><ArrowRightBold /></el-icon
      ></el-col>
      <el-col :span="8" style="text-align: center">
        <img src="../../assets/wxcode.jpg" alt="" class="wx-img" />
      </el-col>
      <el-col :span="8" style="text-align: center">
        <el-icon size="30"><ArrowLeftBold /></el-icon
      ></el-col>
    </el-row>
    <el-row style="align-items: center">
      <el-text type="info"
        >专注于编程知识分享，用简短的语言描述复杂的难点.</el-text
      >
      <el-text type="info" style="text-align: center"
        >● 赶紧扫码关注吧！</el-text
      >
    </el-row>
  </el-dialog>

  <el-row
    style="
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--el-border-color);
      height: 80px;
    "
  >
    <!-- logo盒子 -->
    <logo-box :logo-title="title" click-herf="/" :logo-url="logoUrl"></logo-box>

    <!-- 导航栏 -->
    <el-row style="align-items: center; justify-content: space-between">
      <el-row v-for="item in navItem" :key="item.title">
        <el-link
          v-if="typeof item.title === 'string'"
          :href="item.herf"
          :underline="false"
          style="padding-left: 15px"
          >{{ item.title }}
        </el-link>
        <el-dropdown v-else>
          <span class="el-dropdown-link">
            {{ item.title.name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="sonItem in item.list" :key="sonItem">
                <el-link :href="sonItem.herf" :underline="false"
                  >{{ sonItem.title }}
                </el-link></el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-row>

      <!-- 用户头像 -->
      <el-row style="padding: 0 15px">
        <user-select v-if="isShowUserSelect"> </user-select>
      </el-row>

      <!-- // nav 边框 -->
      <el-divider
        style="height: 50px; padding-left: 10px"
        direction="vertical"
      />

      <!-- // 深色模式切换 -->
      <!-- <switch-theme-button></switch-theme-button> -->
      <zlcode-change-theme></zlcode-change-theme>
      <!-- // svg 图标栏 -->
      <el-row>
        <git-hup-svg
          :up-style="{
            'padding-left': '15px'
          }"
          herf="#"
        ></git-hup-svg>

        <wei-xin-svg
          :up-style="{
            width: '28px',
            'padding-top': '4px',
            'padding-left': '15px'
          }"
          @click="dialogTableVisible = true"
        ></wei-xin-svg>

        <qq-svg
          :up-style="{
            width: '25px',
            'padding-top': '2px',
            'padding-left': '14px'
          }"
          herf="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=MxtMldoDSzIzjKu-i217wIAhLhJ6HIxA&authKey=9YrokvwkO8ulIDtyCA8HeCiA9K1zXa2J76UFBwMx%2FZm%2BYcOav%2BAFHpsNMz167ztY&noverify=0&group_code=716213426"
        ></qq-svg>

        <csdn-svg
          :up-style="{
            width: '20px',
            'padding-top': '4px',
            'padding-left': '15px'
          }"
          herf="https://blog.csdn.net/m0_61784621?type=blog"
        ></csdn-svg>
      </el-row>
    </el-row>
  </el-row>
</template>

<style lang="scss" scoped>
.wx-img {
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.el-dropdown-link:hover {
  color: var(--el-color-primary);
}
.el-dropdown-link:focus {
  outline: none;
}
</style>
